<template>
    <tr>
        <td>
            <input type="checkbox" v-model="obj.checked">
        </td>
        <td>{{obj.name}}</td>
        <td>{{obj.price}}</td>
        <td>
            <!-- 设置数量在减少到0以下时,就会终止，不会再减下去， -->
            <button @click="subFn" :disabled="obj.num === 0">-</button>
            <span>{{obj.num}}</span>
            <button @click="addFn">+</button>
        </td>
        <td>{{obj.price*obj.num}}</td>
        <td>
            <button @click="delFn">删除</button>
        </td>
    </tr>
</template>

<script>

export default {
    props: ['obj', 'index'],
    //    定义函数
    methods: {
        subFn() {
            this.obj.num--;
        },
        addFn() {
            this.obj.num++;
        },
        delFn(){
            this.$emit('del',this.index);
        },
    }
};
</script>

<style scoped lang="scss">

</style>